<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>固定定位</title>

    <style>
      .outer {
        width: 500px;
        background-color: skyblue;
        border: 1px solid black;
        padding: 20px;
        position: relative;
      }

      .box {
        width: 100px;
        height: 100px;
      }

      .box1 {
        background-color: #999;
      }

      .box2 {
        background-color: orange;
        /* 脱离文档流 以使口为准*/
        position: fixed;
        left: 0;
        top: 0;
      }

      .box3 {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="box box1">1</div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis,
      beatae unde rerum maiores esse in dolorum minus recusandae illum? Dolorem
      ab officia harum eligendi dolorum veritatis id enim animi rerum?orem ipsum
      dolor sit amet consectetur adipisicing elit. Perspiciatis, beatae unde
      rerum maiores esse in dolorum minus recusandae illum? Dolorem ab officia
      harum eligendi dolorum veritatis id enim animi rerum?orem ipsum dolor sit
      amet consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores
      esse in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorenim animi rerum?orem ipsum dolor
      sit amet consectetur adipisicing elit. Perspiciatis, beatae unde rerum
      maiores esse in dolorum minus recusandae illum? Dolorem ab officia harum
      eligendi dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorenim animi rerum?orem ipsum dolor
      sit amet consectetur adipisicing elit. Perspiciatis, beatae unde rerum
      maiores esse in dolorum minus recusandae illum? Dolorem ab officia harum
      eligendi dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorenim animi rerum?orem ipsum dolor
      sit amet consectetur adipisicing elit. Perspiciatis, beatae unde rerum
      maiores esse in dolorum minus recusandae illum? Dolorem ab officia harum
      eligendi dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?orem ipsum dolor sit amet
      consectetur adipisicing elit. Perspiciatis, beatae unde rerum maiores esse
      in dolorum minus recusandae illum? Dolorem ab officia harum eligendi
      dolorum veritatis id enim animi rerum?
      <div class="box box2">2</div>
      <div class="box box3">3</div>
    </div>
  </body>
</html>
